// ** React Imports
import { useRef, useEffect, useState } from 'react'

// components
import TopNav from './topNav'
import LeftOne from './leftTop'
import LeftTwo from './leftTwo'
import LeftThree from './leftThree'
import CenterOne from './centerOne'
import CenterTwo from './centerTwo'
import CenterThree from './centerThree'
import RightOne from './rightOne'
import RightTwo from './rightTwo'
import Device from '../Device/index'

// ** Styles
import './index.scss'

const Protect = () => {
  const [show, setShow] = useState(false)
  const [showText, setShowText] = useState('一号线')
  const screenRef = useRef()
  useEffect(() => {
    screenRef.current.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
    window.onresize = () => {
      screenRef.current.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
    }
  }, [])

  const getScale = (w = 1920, h = 1080) => {
    const ww = window.innerWidth / w
    const wh = window.innerHeight / h
    return ww < wh ? ww : wh
  }

  const handleShowDevice = (value) => {
    setShow(!show)
    setShowText(value)
  }

  return (
    <div className="screen-container">
      <div className="screen" ref={screenRef}>
        <TopNav show={show} handleShowDevice={handleShowDevice}></TopNav>
        {show ? (
          <Device showText={showText}></Device>
        ) : (
          <div className="content">
            <div className="left">
              <div className="leftOne">
                <LeftOne />
              </div>
              <div className="leftTwo">
                <LeftTwo />
              </div>
              <div className="leftThree">
                <LeftThree />
              </div>
            </div>
            <div className="center">
              <CenterOne className="centerOne" />
              <CenterTwo
                handleShowDevice={handleShowDevice}
                className="centerTwo"
              />
              <CenterThree className="centerThree" />
            </div>
            <div className="right">
              <RightOne className="rightOne" />
              <RightTwo className="rightTwo" />
            </div>
          </div>
        )}
      </div>
    </div>
  )
}

export default Protect
